<template>
  <section>
    <descriptions :value="options"
                  :column="4" />
    <transport-tags :value="transportTags" />
    <el-divider />
    <!-- <descriptions :value="remarkOptions"
                  :column="4" /> -->
    <el-row>
      <el-col :span="22"
              style="margin-bottom: 8px;">
        <span class="labelSty">备注: </span>
        <span class="valueSty">
          {{ source.desc || '--' }}
        </span>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import Descriptions from "@/components/basic/Descriptions.vue";
import TransportTags from "@/components/basic/TransportTags.vue";
import { returnThousandDigit } from "@/libs/util.js";

const LESS_SCHEMA = [
  { label: "运输模式", name: "transportModeDesc" },
  { label: "计费模式", name: "chargeModeDesc" },
  { label: "计价单位", name: "pricingUnitDesc" },
  { label: "货物分类", name: "goodsCategoryDesc" },
  { label: "包装方式", name: "packageModeDesc" },
  { label: "运输方式", name: "shipModeDesc" },
  { label: "跟踪方式", name: "trackType", component: "TrackDescription" },
  { label: "物品总价值(元)", name: "calculateValue" }
];
const FULL_SCHEMA = [
  { label: "运输模式", name: "transportModeDesc" },
  { label: "计费模式", name: "chargeModeDesc" },
  { label: "计价单位", name: "pricingUnitDesc" },
  { label: "货物分类", name: "goodsCategoryDesc" },
  { label: "车型", name: "vehicleTypeDesc" },
  { label: "规格/车长", name: "vehicleLengthDesc" },
  { label: "容积（立方米）", name: "vehicleVolume" },
  { label: "载重（吨）", name: "vehicleWeight" },
  { label: "整车数量", name: "vehicleCount" },
  { label: "包装方式", name: "packageModeDesc" },
  { label: "运输方式", name: "shipModeDesc" },
  { label: "跟踪方式", name: "trackType", component: "TrackDescription" },
  { label: "物品总价值(元)", name: "calculateValue" }
];

const TAGS_SCHEMA = [
  {
    label: "提货",
    name: "pick"
  },
  {
    label: "送货",
    name: "deliver"
  },
  {
    label: "装货",
    name: "onLoad"
  },
  {
    label: "卸货",
    name: "offLoad"
  },
  {
    label: "保价",
    name: "insure"
  }
];

export default {
  name: "WaybillArguments",
  components: { Descriptions, TransportTags },
  props: {
    value: Object,
    column: {
      type: Number,
      default () {
        return 4;
      }
    }
  },
  computed: {
    source () {
      const source = this.value || {};
      return {
        ...source,
        ...source.transportRequirement,
        ...source.waybillCache,
        createOrderTime: source.createAt,
        createManDesc: source.createBy?.name
      };
    },
    options () {
      let schema = this.source.transportMode === 1 ? LESS_SCHEMA : FULL_SCHEMA;
      const options = schema.map((schema) => {
        let value = this.source[schema.name];
        if (schema.name === "trackType") {
          value = {
            trackType: this.source.device?.trackType,
            trackNo: this.source.device?.deviceCode
          };
        }
        if (schema.name === "calculateValue") {
          value = returnThousandDigit(this.source?.calculateValue, 2)
        }
        return { ...schema, value };
      });
      return [...options];
    },
    remarkOptions () {
      return [
        { label: "备注", value: this.source.desc, component: "TextOverflow" }
      ];
    },
    transportTags () {
      return TAGS_SCHEMA.map((schema) => {
        let value = this.source[schema.name];
        return { ...schema, value };
      }).filter((tag) => tag.value);
    }
  }
};
</script>
<style scoped>
.labelSty {
  font-size: 16px;
  color: var(--prev-color-text-primary);
}
.valueSty {
  font-weight: bold;
  font-size: 16px;
  text-overflow: ellipsis;
  color: var(--prev-color-text-primary);
  line-height: 2;
  word-break: break-all;
}
</style>